<template>
  
	<div>
		<div class="main-body">
  			<h3 class="main-body__title text-left">
  				子账户管理
  				<div class="btn-area">
					<button class="btn btn-primary" data-toggle="modal" data-target="#new-account">新建</button>
				</div>
  			</h3>
  			<div class="main-body__content">
	  			<div class="account-show">
  					<table class="text-left table table-bordered">
  						<thead>
  							<tr>
  								<th>创建时间</th>
  								<th>账户名</th>
  								<th>密码</th>
  								<th>最后登录时间</th>
  								<th>备注</th>
  								<th>操作</th>
  							</tr>
  						</thead>
  						<tbody>
  							<tr>
  								<td>2012-12-12 22：00</td>
  								<td>canyuexihe</td>
  								<td>123123</td>
  								<td>2012-12-12 22：00</td>
  								<td>杨凯</td>
  								<td>
  									<a class="account-remove" data-toggle="modal" data-target="#new-account">删除</a>
  								</td>
  							</tr>
  						</tbody>
	  				</table>
	  			</div>
  			</div>
  		</div>

  		<section class="modal fade" tabindex="-1" id="new-account" role="dialog">
  			<div class="modal-dialog" role="document">
  				<div class="modal-content">
  					<div class="modal-header">
  						<button type="button" class="close" data-dismiss="modal">
  							<span>x</span>
  						</button>
  						<h4 class="modal-title">创建子账户</h4>
  					</div>
  					<div class="modal-body">
  						<div class="form">
  							<div class="form-group">
  								<input type="text" class="form-control" placeholder="请输入子账户用户名">
  							</div>
  							<div class="form-group">
  								<input type="text" class="form-control" placeholder="请输入密码">
  							</div>
  							<div class="form-group">
  								<input type="text" class="form-control" placeholder="请重复密码">
  							</div>
  							<div class="form-group">
  								<button type="button" class="btn btn-primary form-control">创建</button>
  							</div>
  						</div>
  					</div>
  				</div>
  			</div>
  		</section>
	</div>

</template>
<script>
  export default {
    name:'sub-account',
    data(){
      return {}
    }
  }
</script>
<style scoped lang="less">
  	@import '../../assets/style/color';
  	
  	a.account-remove{
  		color:@cl_ff6537;
  	}
  	.modal-body{
  		padding:0 0 33px 0;
  	}
  	.form{
  		width:400px;
  		margin:0 auto;
  		.form-group{
  			margin-top:33px;
  			margin-bottom:0;
  		}
  		button.form-control{
  			width: 100%;
  		}
  	}
</style>